<template>
  <div class="home">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <el-row>
          <!-- logo与博客名 -->
          <el-col :span="8">
            <div class="menu-left">
              <p class="logo">PERSONAL-BLOG</p>
            </div>
          </el-col>
          <!-- 导航菜单 -->
          <el-col :span="8">
            <el-menu
              router
              :default-active="activeIndex"
              ref="menu"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item index="/bloglogin">首页</el-menu-item>
              <el-menu-item index="/blogtype">归档</el-menu-item>
              <el-menu-item index="/messageboard">留言板</el-menu-item>
              <el-submenu index="5">
                <template slot="title">Gitee</template>
                <el-menu-item>
                  <a href="https://gitee.com/wang-yipeng3869">我的主页</a>
                </el-menu-item>
                <el-menu-item>
                  <a href="https://gitee.com/wang-yipeng3869/person_blog">
                    博客源码
                  </a>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
          <!-- 搜索框与登录 -->
          <el-col :span="8">
            <div class="menu-right">
              <!-- <el-input placeholder="请输入内容" class="search">
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="handlesearch"
                ></el-button>
              </el-input> -->
              <el-button @click="handleLogin" class="login">
                后台管理
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!-- 文章和侧边栏 -->
      <el-container class="main-container">
        <router-view />
        <blog-login v-if="isfontuser" :fontuser="fontuser"></blog-login>
      </el-container>
      <!-- 底部 -->
      <el-footer>
        <div class="footer-container">
          <h5>@2022 | 三只小猪的博客</h5>
          <h5>Create by Team Eason Wang</h5>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      activeIndex: '/bloglogin',
      fontuser: {},
      isfontuser: false,
    }
  },
  mounted() {
    this.$refs['menu'].activeIndex = this.$route.path
  },
  methods: {
    handleLogin() {
      location.href = 'http://localhost:8080/login'
    },
    handleSelect(key, keyPath) {
      //console.log(key, keyPath)
    },
  },
}
</script>

<style lang="stylus">
@import "../../assets/styles/home.styl"
  a
   text-decoration: none; /* 去除默认的下划线 */
   outline: none;	/* 去除旧版浏览器的点击后的外虚线框 */
   color: #000;	/* 去除默认的颜色和点击后变化的颜色 */
</style>
